import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, ExternalLink, AlertCircle } from 'lucide-react';
import { useTools } from '../hooks/useTools';

export default function ToolView() {
  const { toolId } = useParams<{ toolId: string }>();
  const navigate = useNavigate();
  const { tools } = useTools();

  const tool = tools.find(t => t.id === toolId);

  if (!tool) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white rounded-lg shadow-sm p-8 text-center">
          <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
          <h2 className="text-2xl font-bold text-slate-800 mb-2">工具未找到</h2>
          <p className="text-slate-600 mb-4">请检查工具ID是否正确</p>
          <button
            onClick={() => navigate('/')}
            className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
          >
            返回首页
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="h-[calc(100vh-4rem)] flex flex-col">
      {/* 工具头部 */}
      <div className="bg-white border-b border-slate-200 px-4 py-3">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <button
              onClick={() => navigate('/')}
              className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
            >
              <ArrowLeft className="w-5 h-5 text-slate-600" />
            </button>
            <div>
              <h1 className="text-xl font-semibold text-slate-800">{tool.name}</h1>
              <p className="text-sm text-slate-500">{tool.description}</p>
            </div>
          </div>

          {tool.type === 'external' && (
            <a
              href={tool.url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center space-x-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
            >
              <span>在新窗口打开</span>
              <ExternalLink className="w-4 h-4" />
            </a>
          )}
        </div>
      </div>

      {/* 工具内容 */}
      <div className="flex-1 bg-white">
        {tool.type === 'iframe' ? (
          <iframe
            src={tool.url}
            className="w-full h-full border-0"
            title={tool.name}
            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
          />
        ) : tool.type === 'external' ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <ExternalLink className="w-16 h-16 text-slate-400 mx-auto mb-4" />
              <p className="text-slate-600 mb-4">此工具将在新窗口中打开</p>
              <a
                href={tool.url}
                target="_blank"
                rel="noopener noreferrer"
                className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors inline-block"
              >
                打开工具
              </a>
            </div>
          </div>
        ) : (
          <div className="flex items-center justify-center h-full">
            <p className="text-slate-500">工具类型不支持</p>
          </div>
        )}
      </div>
    </div>
  );
}


